<template>
    <div class="login_container">
        <div class="login_box">
            <!--      头像区-->
            <div class="avatar_box">
                <div class="font">&nbsp;&nbsp;&nbsp;<router-link :to="{path:'/qiantaihome/shouyezhangshi'}">糖尿病友&nbsp;🏠之家</router-link></div>
            </div>
           <div class="zuce">
               <el-row>
                   欢迎注册糖尿病病友之家！
               </el-row>
               <el-row><span>已有账号？点击</span> <el-button size="mini" @click="userVisible=true">登录</el-button>
               //管理员后台系统<el-button size="mini" @click="adminVisible=true">登录</el-button>
               </el-row>
               <el-row>请选择注册身份：
                       <el-radio-group v-model="rodio">
                           <el-radio :label="1">普通用户</el-radio>
                           <el-radio :label="2">糖尿病患者</el-radio>
                           <el-radio :label="3">医生</el-radio>
                       </el-radio-group>
               </el-row>
               <router-view></router-view>

        </div>
<!--        //普通用户登录对话框-->
        <el-dialog
                title="普通用户登录"
                :visible.sync="userVisible"
                width="80%"
                :modal="false"
               >
            <el-form ref="userformref" :model="userform" :rules="userformrules" label-width="80px">
                <el-form-item label="用户名" prop="account">
                    <el-input v-model="userform.account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password"  >
                    <el-input v-model="userform.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="userVisible = false">取 消</el-button>
    <el-button type="success" @click="userlongin">确 定</el-button>
  </span>
        </el-dialog>
<!--        //管理员登录对话框-->
        <el-dialog
                title="管理员登录"
                :visible.sync="adminVisible"
                width="80%"
                :modal="false"
                >

            <el-form ref="adminformref" :model="adminform" :rules="adminformrules" label-width="80px">
                <el-form-item label="用户名" prop="account">
                    <el-input v-model="adminform.account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="adminform.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="adminVisible = false">取 消</el-button>
                <el-button type="success" @click="adminlongin">确 定</el-button>
            </span>
        </el-dialog>
<!--//注册对话框-->
        </div>

    </div>
</template>

<script>
    export default {
        data(){
            return{
                //普通用户登录信息表单数据
                userform:{
                    account:'',
                    password:''
                },
                //管理员登录信息表单数据
                adminform:{
                    account:'',
                    password:''
                },
                //普通用户表单验证数据对象
                userformrules:{
                    account:[
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 5, max: 11, message: '长度为5到11个字符', trigger: 'blur' }],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5, max: 8, message: '长度为5到8个字符', trigger: 'blur' }
                    ]
                },
                //管理员表单验证数据对象
                adminformrules:{
                    account:[
                      { required: true, message: '请输入用户名', trigger: 'blur' },
                      { min: 3, max: 5, message: '长度为11 个字符', trigger: 'blur' }],
                  password: [
                      { required: true, message: '请输入密码', trigger: 'blur' },
                      { min: 5, max: 8, message: '长度为5到8个字符', trigger: 'blur' }
                  ]
                },
                userVisible:false,
                adminVisible:false,
                //个人资料
                basicUserInformation:{},
                //健康信息表
                healthInformation:{},
                //当前该角色身份
                userRole:'',
                //？
                topics:[],
                //以下是注册
                // zhuceform:{
                //     telephoneNumber: '',
                //     password: '',
                //     birth: '',
                //     email: '',
                //     role: '',
                //     sex: '',
                //     username: '',
                //     proof:'',
                //
                // },
                zhuceVisble:false,
                rodio:'1'


            }
        },
        created() {
            this.qingchu()
        },
        watch:{
            rodio:{
                handler(val){
                    if(val==1)this.$router.push('putonzhuce')
                    if(val==2)this.$router.push('tanzhuce')
                    if(val==3)this.$router.push('yishengzhuce')

                }
            }
        },
        methods: {
            open(word) {
                this.$alert(word, '提示', {
                    confirmButtonText: '确定'

                });
            },
            qingchu(){
                window.sessionStorage.clear()
            },
            adminlongin() {
                //预校验
                this.$refs.adminformref.validate(async valid => {
                    if (!valid) return;
                    try {
                        //发送post请求获取token并存储
                        const res = await this.$http.post('user/login', this.adminform)
                        console.log(res.status)
                        if (res.status === 200) {
                            window.sessionStorage.setItem('token',res.data.data.Authorization)
                                        //发送带token请求头的get请求或者用户信息，包含用户身份
                                        const {data:jieguo}=await this.$http.get('user/info',{headers:{
                                                'Authorization':window.sessionStorage.getItem('token')
                                            }})
                            console.log('?')
                                        if(jieguo.data.userRole!=='管理员')return this.open('您非管理员身份！')
                                        this.$router.push({name:'houtaihome'})
                            this.$message.success('登录成功！')
                        }
                    } catch (e) {
                        console.log(e)
                        this.open('用户名或密码错误！')
                    }

                })

                //
                //  window.sessionStorage.setItem('token',res.data.Authorization)
                //  //发送带token请求头的get请求或者用户信息，包含用户身份
                // const {data:jieguo}=await this.$http.get('user/info',{headers:{
                //     'Authorization':window.sessionStorage.getItem('token')
                //  }})
                // if(jieguo.data.userRole!=='管理员')return this.$message.error('您非管理员身份！')
                //  // this.$message.error('用户名或密码错误！')
                //  this.$message.success('登录成功！')
                //  this.$router.push('/houtaihome')

            },
            userlongin(){
                //预校验
                this.$refs.userformref.validate(async valid=>{
                    if(!valid)return;
                    try {
                        //发送post请求获取token并存储
                        const res = await this.$http.post('user/login', this.userform)
                        console.log(res.data)
                        if (res.data.code === 200) {
                            window.sessionStorage.setItem('token',res.data.data.Authorization)
                            //发送带token请求头的get请求或者用户信息，包含用户身份
                            this.$router.push({name:'qiantaihome'})
                            this.$message.success('登录成功！')
                        }else if(res.data.code === 403){
                            this.$message(res.data.msg);
                        }
                    } catch (e) {
                        console.log('----',e);
                        // this.open(e.data.data.msg);
                    }
                })
            },

        }
        }


</script>

<style  scoped>

    .login_container{
        background-image: url(../assets/shouyeditu.png);
        height: 100%;

    }
    .login_box{
        width: 650px;

        height: max-content;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    .avatar_box{
        margin-top: 40px;
        height: 150px;
        width: 260px;
        border: solid 1px #eee;
        border-radius: 50%;
        padding-top: 100px;
        box-shadow: 0 0 5px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: white;
    }
    .avatar_box img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .btn{
        display: flex;
        justify-content: flex-end;
    }
  .font{
      font-size: 300%;
      color:#006400;
      text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 3px;
      align-content: center;
      padding-left: 20px;

  }
  .font2{
      font-size: 100%;
      color:#006400;
      text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;
      position: absolute;
      left:35%


  }
    .btns{
        position: absolute;
        left: 27%;
        display: flex;
        flex-direction: column;
        top: 45%;

    }
    .jianjv{
        padding: 2px;
    }
.jianjv2{

    padding: 2px;
    left: 20%;
}
    .zuce{
        margin-top: 170px;
        padding-left: 70px;
        padding-right: 90px;
        padding-bottom: 20px;
    }


</style>
